<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${ctx}/static/admin/layui/css/layui.css">
    <link rel="stylesheet" href="${ctx}/static/admin/css/formSelects-v4.css">

</head>
<body>
<div class="layui-card-body">
    <form class="layui-form layui-form-pane">
        <div class="layui-collapse" lay-filter="baseInfo" lay-accordion="" >
            <!--基础信息-->
            <input name="id" type="hidden" value="${item.id! }" />
            <div class="layui-colla-item" >
                <h2 class="layui-colla-title" id="baseInfo">基础参数</h2>
                <div class="layui-colla-content layui-show" >
                    <div class="layui-row">
                        <div class="layui-form-item">
                            <label class="layui-form-label">接口地址<font style="color: red">*</font></label>
                            <div class="layui-input-block">
                                <input type="text" id="interfaceUrl" name="interfaceUrl" placeholder="请输入接口地址" autocomplete="off" class="layui-input" value="${item.interface_url!}" >
                            </div>
                        </div>
                    </div>

                    <div class="layui-row">
                        <div class="layui-form-item">
                            <label class="layui-form-label">请求方式<font style="color: red">*</font></label>
                            <div class="layui-input-block">
                                <select name="requestType" id="requestType"></select>
                            </div>
                        </div>
                    </div>

                    <div class="layui-row" >
                        <div class="layui-col-xs4">
                            <div class="layui-form-item">
                                <label class="layui-form-label">请求状态<font style="color: red">*</font></label>
                                <div class="layui-input-block">
                                    <input type="text" name="successName" id="successName" placeholder="请输入请求状态名称" autocomplete="off" class="layui-input" value="${item.success_name!}" >
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs4">
                            <input type="text" name="successCode" id="successCode" placeholder="请输入请求状态代码" autocomplete="off" class="layui-input" value="${item.success_code!}" >
                        </div>
                        <div class="layui-col-xs4">
                            <input type="text" name="successMsg" id="successMsg" placeholder="请输入请求状态信息" autocomplete="off" class="layui-input" value="${item.success_msg!}" >
                        </div>
                    </div>

                    <div class="layui-row">
                        <div class="layui-form-item" pane="">
                            <label class="layui-form-label">是否Token<font style="color: red">*</font></label>
                            <div class="layui-input-block">
                                <input type="radio" name="isToken"  value="1" id="token1" lay-filter="token" title="是" >
                                <input type="radio" name="isToken"  value="2" id="token2" lay-filter="token" title="否" >
                            </div>
                        </div>
                    </div>

                    <div class="layui-row" id="tokenId" hidden>
                        <div class="layui-col-xs6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">Token<font style="color: red">*</font></label>
                                <div class="layui-input-block">
                                    <input type="text" name="tokenKey" id="tokenKey" placeholder="请输入Token名称" autocomplete="off" class="layui-input" value="${tokenKey!}" >
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <input type="text" name="tokenValue" id="tokenValue" placeholder="请输入Token值" autocomplete="off" class="layui-input" value="${tokenValue!}" >
                        </div>
                    </div>

                    <div class="layui-row" id="tokenPositionId" hidden>
                        <div class="layui-form-item">
                            <label class="layui-form-label">Token位置<font style="color: red">*</font></label>
                            <div class="layui-input-block">
                                <select name="tokenPosition" id="tokenPosition"></select>
                            </div>
                        </div>
                    </div>

                    <div class="layui-row">
                        <div class="layui-form-item" pane="">
                            <label class="layui-form-label">是否加密<font style="color: red">*</font></label>
                            <div class="layui-input-block">
                                <input type="radio" name="isEncrypt" id="encrypt1" value="1" lay-filter="encrypt" title="是" >
                                <input type="radio" name="isEncrypt" id="encrypt2" value="2" lay-filter="encrypt" title="否" >
                            </div>
                        </div>
                    </div>

                    <div class="layui-row" id="encryptTypeId" hidden>
                        <div class="layui-form-item">
                            <label class="layui-form-label">加密方式：<font style="color: red">*</font></label>
                            <div class="layui-input-block">
                                <select name="encryptType" id="encryptType"></select>
                            </div>
                        </div>
                    </div>

                    <div class="layui-row" id="encryptColumnId" hidden>
                        <div class="layui-form-item">
                            <label class="layui-form-label">加密参数：<font style="color: red">*</font></label>
                            <div class="layui-input-block">
                                <select name="encryptColumn" id="encryptColumn"></select>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <!--header参数-->
            <div class="layui-colla-item" >
                <h2 class="layui-colla-title" id="headerInfo">Header参数</h2>
                <div class="layui-colla-content">
                    <div id="header" class="demo-transfer"></div>
                </div>
            </div>

            <!--body参数-->
            <div class="layui-colla-item"  >
                <h2 class="layui-colla-title" id="bodyInfo">Body参数</h2>
                <div class="layui-colla-content " >
                    <div id="body" class="demo-transfer"></div>
                </div>
            </div>

            <!--header参数-->
            <div class="layui-colla-item" >
                <h2 class="layui-colla-title" id="queryInfo">Query参数</h2>
                <div class="layui-colla-content">
                    <div id="query" class="demo-transfer"></div>
                </div>
            </div>

            <!--返回参数-->
            <div class="layui-colla-item" >
                <h2 class="layui-colla-title" id="columnsInfo">请求参数</h2>
                <div class="layui-colla-content " >
                    <table id="columnstable" lay-filter="columnstable"></table>
                </div>
            </div>

            <!--返回参数-->
            <div class="layui-colla-item" >
                <h2 class="layui-colla-title" id="parametersInfo">接收参数</h2>
                <div class="layui-colla-content">
                    <div class="dHead">
                        <button  class="layui-btn layui-btn-xs" id="add">添加根目录</button>
                    </div>
                    <table class="layui-hide" id="res_table" lay-filter="res_table"></table>
                </div>
            </div>
        </div>

        <div class="layui-form-item" style="display: none">
            <div class="layui-input-block">
                <button id="submit-btn" class="layui-btn" lay-submit >立即提交</button>
                <button id="reset-btn" type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script src="${ctx}/static/admin/layui/layui.js"></script>
<script src="${ctx}/static/admin/js/common.js"></script>
<script type="text/html" id="toolbar">
    <#button permission="" iconCls="layui-btn" size="layui-btn-xs" textName="添加" event="add"/>
    <#button permission="" iconCls="layui-warm" size="layui-btn-xs" textName="编辑" event="edit"/>
</script>
<script>
    var ctx = '${ctx}';
    layui.use(['transfer', 'layer', 'form','element','table','util','formSelects','treeGrid'], function(){
        var tableIns ;
        var $ = layui.$
            ,table = layui.table
            ,util = layui.util
            ,element = layui.element
            ,transfer = layui.transfer
            ,layer = layui.layer
            ,treeGrid = layui.treeGrid
            ,form = layui.form;

        /***********************************************************************初始化字典参数******************************************************/
        //请求方式
        $.ajax({
            type: "POST",
            url: ctx+'/sys_admin/sys/dict/getData',
            data: {'keyword':'requestType'},
            async:false,
            success: function(datas){
                $('#requestType').empty();
                $.each(datas, function (i, data) {
                    if(data.value=="${item.request_type!}"){
                        $('#requestType').append('<option value="'+data.value+'" selected>'+data.name+'</option>>');
                    }else{
                        $('#requestType').append('<option value="'+data.value+'">'+data.name+'</option>>');
                    }
                })
            }
        });


        //token位置
        $.ajax({
            type: "POST",
            url: ctx+'/sys_admin/sys/dict/getData',
            data: {'keyword':'tokenPosition'},
            async:false,
            success: function(datas){
                $('#tokenPosition').empty();
                $.each(datas, function (i, data) {
                    if(data.value=="${item.token_position!}"){
                        $('#tokenPosition').append('<option value="'+data.value+'" selected>'+data.name+'</option>>');
                    }else{
                        $('#tokenPosition').append('<option value="'+data.value+'">'+data.name+'</option>>');
                    }
                })
            }
        });

        //加密方式
        $.ajax({
            type: "POST",
            url: ctx+'/sys_admin/sys/dict/getData',
            data: {'keyword':'encryptType'},
            async:false,
            success: function(datas){
                $('#encryptType').empty();
                $.each(datas, function (i, data) {
                    if(data.value=="${item.encrypt_type!}"){
                        $('#encryptType').append('<option value="'+data.value+'" selected>'+data.name+'</option>>');
                    }else{
                        $('#encryptType').append('<option value="'+data.value+'">'+data.name+'</option>>');
                    }
                })
            }
        });

        //加密参数
        $.ajax({
            type: "POST",
            url: ctx+'/sys_admin/sys/dict/getData',
            data: {'keyword':'encryptColumn'},
            async:false,
            success: function(datas){
                $('#encryptColumn').empty();
                $.each(datas, function (i, data) {
                    if(data.value=="${item.encrypt_column!}"){
                        $('#encryptColumn').append('<option value="'+data.value+'" selected>'+data.name+'</option>>');
                    }else{
                        $('#encryptColumn').append('<option value="'+data.value+'">'+data.name+'</option>>');
                    }
                })
            }
        });

        /***********************************************************************是否开启接口数据******************************************************/
        if("${item.is_interface}"==2) { //已启用
            $('#interfaceUrl').attr('lay-verify', 'required');
            $('#successName').attr('lay-verify', 'required');
            $('#successCode').attr('lay-verify', 'required');
        }else {
            $('#interfaceUrl').attr('lay-verify', '');
            $('#successName').attr('lay-verify', '');
            $('#successCode').attr('lay-verify', '');
        }

        /***********************************************************************监听折叠******************************************************/
        element.on('collapse(baseInfo)', function(data){
            if(data.show){
                var id = $(this).attr('id');
                if(id=='columnsInfo'){
                    tableIns.reload({});
                }
            }
        });

        /***********************************************************************Token配置******************************************************/
            if("${item.is_token}"==1){
                $("#token1").attr("checked","checked");
                $("#token2").removeAttr("checked");
                $('#tokenId').show();
                $('#tokenPositionId').show();
                if("${item.is_interface}"==2) { //已启用
                    $('#tokenKey').attr('lay-verify', 'required');
                    $('#tokenValue').attr('lay-verify', 'required');
                    $('#tokenPosition').attr('lay-verify', 'required');
                }
                form.render();
            }else{
                $("#token2").attr("checked","checked");
                $("#token1").removeAttr("checked");
                $('#tokenKey').attr('lay-verify', '');
                $('#tokenValue').attr('lay-verify', '');
                $('#tokenPosition').attr('lay-verify', '');
                form.render();
            }

        form.on("radio(token)", function (data) {
            if (this.value == '1') {
                $('#tokenId').show();
                $('#tokenPositionId').show();
                if("${item.is_interface}"==2) { //已启用
                    $('#tokenKey').attr('lay-verify', 'required');
                    $('#tokenValue').attr('lay-verify', 'required');
                    $('#tokenPosition').attr('lay-verify', 'required');
                }
                form.render();
            } else if (this.value == '2') {
                $('#tokenId').hide();
                $('#tokenPositionId').hide();
                $('#tokenKey').attr('lay-verify', '');
                $('#tokenValue').attr('lay-verify', '');
                $('#tokenPosition').attr('lay-verify', '');
                form.render();
            }
        });

        /***********************************************************************加密方式配置******************************************************/
        if("${item.is_encrypt}"==1){
            $("#encrypt1").attr("checked","checked");
            $("#encrypt2").removeAttr("checked");
            form.render();
            $('#encryptTypeId').show();
            $('#encryptColumnId').show();
        }else{
            $("#encrypt2").attr("checked","checked");
            $("#encrypt1").removeAttr("checked");
            form.render();
        }

        form.on("radio(encrypt)", function (data) {
            if (this.value == '1') {
                $('#encryptTypeId').show();
                $('#encryptColumnId').show();
            } else if (this.value == '2') {
                $('#encryptTypeId').hide();
                $('#encryptColumnId').hide();
            }
        });

        /***********************************************************************Header参数配置******************************************************/
        var headerSearchList;
        $.ajax({
            type: "POST",
            url: '${ctx}/sys_admin/interface/getHeaderSearchList',
            data: {'moduleid':'${moduleid}'},
            async:false,
            success: function(data){
                for (var i = 0; i <data.length ; i++) {
                    if(data[i].type=="file"){
                        data.splice(i,1);
                    }
                }
                headerSearchList = data;
            }
        });

        var headerSearchedList;
        $.ajax({
            type: "POST",
            url: '${ctx}/sys_admin/interface/getHeaderSearchedList',
            data: {'moduleid':'${moduleid}'},
            async:false,
            success: function(data){
                headerSearchedList = data;
            }
        });

        //定义标题及数据源
        transfer.render({
            elem: '#header',
            title: ['候选字段', '已选字段'],  //自定义标题
            data: headerSearchList,
            value: headerSearchedList,
            width: '45%', //定义宽度
            height:400, //定义高度
            onchange: function(obj, index){
                var  ids = "";
                for (var i = 0; i <obj.length ; i++) {
                    var id = obj[i].value;
                    if(ids.length>0){
                        ids+=","+id;
                    }else{
                        ids+=id;
                    }
                }
                updateHeader(ids,index)
            }
        });

        function updateHeader(ids,type) {
            $.ajax({
                type: "POST",
                url: '${ctx}/sys_admin/interface/updateHeader',
                data: {'moduleid':'${moduleid}','ids':ids,'type':type},
                success: function(data){
                    console.log(data)
                }
            });
        }
        /***********************************************************************Body参数配置******************************************************/
        var bodySearchList;
        $.ajax({
            type: "POST",
            url: '${ctx}/sys_admin/interface/getBodySearchList',
            data: {'moduleid':'${moduleid}'},
            async:false,
            success: function(data){
                console.log("Body参数配置")
                console.log(data)
                /*
                for (var i = 0; i <data.length ; i++) {
                    if(data[i].type=="file"){
                        data.splice(i);
                    }
                }
                */
                bodySearchList = data;
            }
        });

        var bodySearchedList;
        $.ajax({
            type: "POST",
            url: '${ctx}/sys_admin/interface/getBodySearchedList',
            data: {'moduleid':'${moduleid}'},
            async:false,
            success: function(data){
                bodySearchedList = data;
            }
        });

        transfer.render({
            elem: '#body',
            title: ['候选字段', '已选字段'],  //自定义标题
            data: bodySearchList,
            value: bodySearchedList,
            width: '45%', //定义宽度
            height:400, //定义高度
            onchange: function(obj, index){
                var  ids = "";
                for (var i = 0; i <obj.length ; i++) {
                    var id = obj[i].value;
                    if(ids.length>0){
                        ids+=","+id;
                    }else{
                        ids+=id;
                    }
                }
                updateBody(ids,index)
            }
        });

        function updateBody(ids,type) {
            $.ajax({
                type: "POST",
                url: '${ctx}/sys_admin/interface/updateBody',
                data: {'moduleid':'${moduleid}','ids':ids,'type':type},
                success: function(data){
                    console.log(data)
                }
            });
        }

        /***********************************************************************Query参数配置******************************************************/
        var querySearchList;
        $.ajax({
            type: "POST",
            url: '${ctx}/sys_admin/modules/getSearchList',
            data: {'moduleid':'${moduleid}'},
            async:false,
            success: function(data){
                for (var i = 0; i <data.length ; i++) {
                    if(data[i].type=="file"){
                       data.splice(i,1);
                    }
                }
                querySearchList = data;
            }
        });

        var querySearchedList;
        $.ajax({
            type: "POST",
            url: '${ctx}/sys_admin/interface/getQuerySearchedList',
            data: {'moduleid':'${moduleid}'},
            async:false,
            success: function(data){
                querySearchedList = data;
            }
        });

        transfer.render({
            elem: '#query',
            title: ['候选字段', '已选字段'],  //自定义标题
            data: querySearchList,
            value: querySearchedList,
            width: '45%', //定义宽度
            height:400, //定义高度
            onchange: function(obj, index){
                var  ids = "";
                for (var i = 0; i <obj.length ; i++) {
                    var id = obj[i].value;
                    if(ids.length>0){
                        ids+=","+id;
                    }else{
                        ids+=id;
                    }
                }
                updateQuery(ids,index)
            }
        });

        function updateQuery(ids,type) {
            $.ajax({
                type: "POST",
                url: '${ctx}/sys_admin/interface/updateQuery',
                data: {'moduleid':'${moduleid}','ids':ids,'type':type},
                success: function(data){
                    console.log(data)
                }
            });
        }
        /***********************************************************************请求参数******************************************************/
        tableIns = table.render({
            elem: '#columnstable',
            height:'full-240',
            size:'sm',
            url: ctx+'/sys_admin/interface/getParameterColumns?moduleid=${moduleid}',
            cols: [[
                {type: 'numbers'},
                {field: 'id', title: 'ID', align:'center',width:100, hide:true},
                {field: 'column_comment', title: '字段名称', align:'center',width:200},
                {field: 'status', title: '是否必填', align:'center',width:200,
                    templet: function(d){
                        if (d.status == 2) {
                            return '<font style="color: red">是</font>';
                        } else {
                            return '否';
                        }
                    }
                },
                {field: 'interface_name', title: '接口名称', align:'center',edit: 'text'},
            ]]
        });
        //监听单元格编辑
        table.on('edit(columnstable)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            //layer.msg('[ID: '+ data.column_comment +'] ' + field + ' 字段更改值为：'+ util.escape(value));
            $.ajax({
                type: "POST",
                url: '${ctx}/sys_admin/interface/updateColumnsInterfaceName',
                data: {'id':data.id,'name':value},
                success: function(res){
                    if(res.code==0){
                        layer.msg('【'+ data.column_comment +'】接口名称变更为【'+ util.escape(value)+'】');
                    }else{
                        tableIns.reload({});
                        layer.msg(res.msg);
                    }
                }
            });
        });

        /***********************************************************************返回参数******************************************************/
        //开启复选框
        treeGrid.render({
            id: 'res_table',
            elem: '#res_table',
            idField: 'id',
            url: '${ctx}/sys_admin/sys/res/getTreeGridView',
            height:'full-70',
            size:'sm',
            even:true,
            cellMinWidth: 100,
            isFilter:false,
            treeId: 'id',//树形id字段名称
            treeUpId: 'pId',//树形父id字段名称
            treeShowName: 'name',//以树形式显示的字段
            iconOpen:false,//是否显示图标【默认显示】
            method:'post',
            cols: [[
                {type: 'numbers'},
                {width: 120 ,title: '操作', align: 'center', toolbar: '#toolbar'},
                {field: 'name', width: 220, title: '资源名称'},
                {field: 'url', width: 200, title: '路径'},
                {field: 'seq', width: 80, title: '排序'},
                {field: 'status', width: 100, title: '状态', templet: '#enabled'},
                {field: 'des', unresize: true, title: '描述'}
            ]],
            page:false,
            parseData:function (res) {//数据加载后回调
                return res;
            }
        });

        $("#add").on('click', function() {
            parent.layer.open({
                type: 2,
                area: ['700px', '530px'],
                fixed: false, //不固定
                maxmin: true,
                content: '${ctx}/sys_admin/interface/interfaceParameterForm?isadd=true',
                btn: ['保存', '关闭'],
                yes: function(index, layero){
                    var iframeWin = layero.find('iframe')[0];//得到iframe页的窗口对象，执行iframe页的方法：
                    iframeWin.contentWindow.treeGrid = treeGrid;
                    iframeWin.contentWindow.treeId = 'res_table';
                    layero.find('iframe').contents().find('#submit-btn').click();
                },
                btn3: function(index, layero){
                    var index = layer.getFrameIndex(window.name);
                    layer.close(index); //再执行关闭
                }
            });
        });

        treeGrid.on('tool(res_table)',function (obj) {
            var data = obj.data;
            if(obj.event === 'edit'){
                parent.layer.open({
                    type: 2,
                    area: ['700px', '530px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: '${ctx}/sys_admin/interface/interfaceParameterForm?id='+data.id,
                    btn: ['保存', '关闭'],
                    yes: function(index, layero){
                        var iframeWin = layero.find('iframe')[0];//得到iframe页的窗口对象，执行iframe页的方法：
                        iframeWin.contentWindow.treeGrid = treeGrid;
                        iframeWin.contentWindow.treeId = 'res_table';
                        layero.find('iframe').contents().find('#submit-btn').click();
                    },
                    btn2: function(index, layero){
                        var index = layer.getFrameIndex(window.name);
                        layer.close(index); //再执行关闭
                    }
                });
            }else if(obj.event==="add"){//添加行
                parent.layer.open({
                    type: 2,
                    area: ['700px', '530px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: '${ctx}/sys_admin/interface/interfaceParameterForm?id='+data.id+'&isadd=true',
                    btn: ['保存', '关闭'],
                    yes: function(index, layero){
                        var iframeWin = layero.find('iframe')[0];//得到iframe页的窗口对象，执行iframe页的方法：
                        iframeWin.contentWindow.treeGrid = treeGrid;
                        iframeWin.contentWindow.treeId = 'res_table';
                        layero.find('iframe').contents().find('#submit-btn').click();
                    },
                    btn2: function(index, layero){
                        var index = layer.getFrameIndex(window.name);
                        layer.close(index); //再执行关闭
                    }
                });
            }
        });
        /***********************************************************************信息提交校验******************************************************/
        form.on('submit', function(data){
            if("${item.is_interface}"==2) { //已启用
                var columns = table.cache["columnstable"];
                for (var i = 0; i <columns.length ; i++) {
                    var column = columns[i];
                    if(column.status==2){
                        if(column.interface_name==null || column.interface_name.length<1){
                            layer.msg("字段参数中【"+column.column_comment+"】未配置字段参数");
                            return false;
                        }
                    }
                }
            }

            $.post('${ctx}/sys_admin/interface/updateInterface', $(data.form).serialize(), function(result) {
                if (result.success) {
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                } else {
                    layer.msg(result.msg);
                }
            }, 'json');
            return false;
        });

    });
</script>

</body>
</html>